<!--honghiepcao@gmai.com-->
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Pie Chart Canvas</title>
    </head>
    <body>
        <section>
            <div>
                <canvas id="canvas" width="400" height="300">
                    Your browser does not support HTML5 Canvas.
                    <!--This text is displayed if your browser does not support HTML5 Canvas.-->
                </canvas>
            </div>

            <script type="text/javascript">
                function PeiChart(){                    
                    this.myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
                    this.data = [];
                    this.category=[];
                    this.sumTotalValues = sumTotalValues;
                    this.plotPeiChart = plotPeiChart;
                    this.plotPeiArc = plotPeiArc;
                    this.plotTitle = plotTitle;
                }
                function sumTotalValues(intValueArray){
                    var myTotal = 0;
                    for (var j = 0; j < intValueArray.length; j++) {
                        myTotal += (typeof intValueArray[j] == 'number') ? intValueArray[j] : 0;
                    }
                    return myTotal;
                }

                function plotPeiChart(cv) {
                    this.canvas = document.getElementById(cv);
                    var lastend = -Math.PI/2;                    
                    var myTotal = this.sumTotalValues(this.data);
                    var width = this.canvas.width;
                    var height = this.canvas.height;
                    var ctx = this.canvas.getContext("2d");
                    height = Math.min(width, height);
                    ctx.clearRect(0, 0, width, height);

                    for (var i = 0; i < this.data.length; i++) {
                        this.plotPeiArc(ctx, height/2, height/2, 0.8*height/2, lastend, lastend += Math.PI*2*(this.data[i]/myTotal), this.myColor[i], this.category[i]);
                    }
                }
            
                function plotPeiArc(ctx, centerX, centerY, radius, startAngle, endAngle, color, categoryItemTitle) {
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.moveTo(centerX, centerY);
                    ctx.arc(centerX, centerY, radius ,startAngle, endAngle, false);
                    ctx.lineTo(centerX, centerY);
                    ctx.fill();                
                    ctx.font="10px tahoma";
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = 'black';
                    var angle = (endAngle+startAngle)/2;
                    var percent = Math.ceil(10000*(endAngle-startAngle)/Math.PI/2)/100;
                    var title = (categoryItemTitle.length > 0 ? categoryItemTitle+' ' : '' );
                    
                    this.plotTitle(ctx, centerX, centerY, radius, angle, title, percent);
                    
                }
                
                function plotTitle(ctx, centerX, centerY, radius, angle, title, percent){
                    var sin = Math.sin(angle);
                    var cos = Math.cos(angle);
                    ctx.fillText(title+percent+'%',radius*cos*1.2+centerX,radius*sin*1.2+centerY);
                }

                var peiChart1 = new PeiChart();
                peiChart1.category = ['','bb','ccc','dddd','eeeee'];
                peiChart1.data = [30,40,50,10,60];
                peiChart1.plotPeiChart('canvas');

            </script>
        </section>
    </body>
</html>